<template>
	<view class="circle">
		<view class="user-info" >
			<view class="transparent"></view>
			<view class="base-info" v-show="user.cover">
				<image :src="user.cover" mode="aspectFill" class="cover" ></image>
			</view>	
				<view class="user-desc">
					<image :src="user.avatar" mode="aspectFill" class="avatar"></image>
					<view class="name">{{user.name}}</view>
				</view>
		</view>	
		
		<view class="select-tab">
			<view class="tabs" style="width: 50%; margin: 0 auto;background: #fff;">
				<v-tabs  padding="4px 0px"  v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px"/>
			</view>
		</view>
		
								
		<view class="" v-if="activeTab == 0">
			<!--已加圈子列表-->
			<view class="none" v-if="myCirList.err == 1">
				{{myCirList.msg}}~_~
			</view>
			
			<scroll-view scroll-y="true"  v-if="myCirList.length > 0">
				<view class="tui-news-view">
					<view class="circle-item tui-news-flex" v-for="(item,index) in myCirList" :key="index"  @tap.stop="godetail(item.id)">
						<view class="tui-news-picbox">
								<image :src="item.logo"  class="tui-block" mode="aspectFill"></image>  
						</view>
						<view class="center">
							<view class="tui-news-tbox tui-flex-column " >
								<view class="name">{{item.name}}</view>
								<!-- <view class="intro">{{item.intro}}</view> -->
								<view class="detail">
									<view class="u-num">{{item.user_num}}人参加</view>
									<view class="vLine"></view>
									<view class="posted">{{item.posted}}次打卡</view>
								</view>
							</view>
						</view>
						<view class="right">
							<image src="/static/images/user/godetail.png" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		
		</view>
		
		<view class="" v-if="activeTab == 1">
			<!--发现圈子列表-->
			<scroll-view scroll-y="true" v-if="cirList.length">
				<view class="tui-news-view">
					<view class="circle-item tui-news-flex" v-for="(item,index) in cirList" :key="index"  @tap.stop="godetail(item.id)">
						<view class="tui-news-picbox">
								<image :src="item.logo"  class="tui-block" mode="aspectFill"></image>  
						</view>
						<view class="center">
							<view class="tui-news-tbox tui-flex-column " >
								<view class="name">{{item.name}}</view>
								<!-- <view class="intro">{{item.intro}}</view> -->
								<view class="detail">
									<view class="u-num">{{item.user_num}}人参加</view>
									<view class="vLine"></view>
									<view class="posted">{{item.posted}}次打卡</view>
								</view>
							</view>
							<!-- 加入圈子按钮 -->
							<!-- <view  @tap.stop="joinCir(item.id)" hover-class="none" class="join">加入</view> -->
						</view>
						<view class="right">
							<image src="/static/images/user/godetail.png" mode=""></image>
						</view>
					
					</view>
				</view>
			</scroll-view>
			<view class="none" v-if="!isLoad && !cirList.length">
				暂时没有推荐的圈子呢~_~
			</view>
		</view>
	
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	import card from '../../../components/common/card.vue'
	export default {
		data() {
			return {
				user:[],
				myCirList: [],
				activeTab:0,
				cateList:[{name:'已加圈子'},{name:'发现圈子'}],
				cirList:[], //推荐圈子
				result:[],
				isLoad:1,
				ifonShow:false
			}
		},
		methods: {
			changeTab(e) {
				this.activeTab = e
				if(this.activeTab == 0) {
					this.getMyCircles()
				}else if(this.activeTab == 1) {
					this.getReCir()
				}
			},
			async getReCir() {//获取推荐圈子数据
				this.isLoad = 1
				this.cirList = await api.GetRecommendCircles()
				this.isLoad = 0
			},
			async getUser() {//获取用户数据
				let res = await api.GetMe()
				this.user = res[0]
			},
			async getMyCircles() {//获取我的圈子数据
				this.myCirList = await api.GetMyIntendCir()
			},
			godetail() {
				uni.navigateTo({
					url:'/pages/circle/comps/Detail?id='+arguments[0]
				})
			},
			async joinCir(id) {//加入圈子
				this.result = await api.JoinCir(id)
				console.log(this.result);
				if(this.result.err == 0) {
					this.getReCir()
					uni.showToast({
						title: this.result.msg,
						duration:700,
					})
				}else {
					uni.showToast({
						title: this.result.msg, 
						duration:700,
					})
				}
				
			}
		},
		onHide() {
			this.ifonShow = !this.ifonShow
			// console.log(this.ifonShow);
		},
		onShow() {
			if(this.ifonShow) {//onShow与onLoad首次不并发
				this.getMyCircles()
				this.getReCir()
				this.ifonShow = !this.ifonShow
				// this.getUser()
				// console.log('llala');
			}
		},
		onLoad() {
			this.getMyCircles()
			this.getUser()
		}
	}
</script>
<style lang="scss" scoped>
	.circle {
		height: 100vh;
		background: #fff;
	} 
	.none {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50rpx;
		font-size: 32rpx;
		color: #A7AAB5;
	}
	.select-tab {
		border-bottom: 4rpx solid #F3F6F5;
	}
	.user-info{
		position: relative;
		width: 100%;
		height: 380rpx;
		.transparent {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			background:rgba(2, 2, 2, 0.25);
		}
		.base-info {	
			display: flex;
			position: absolute;
			width: 100%;
			height: 380rpx;
			justify-content: center;
			.cover {
				position: absolute;
				z-index: 0;
				width: 100%;
				height: 380rpx;
				// filter: blur(4px); 
			}
			
			.edit {
				color: #fff;
				text-align: center;
				position: absolute;
				bottom: 55rpx;
				right: 50rpx;
				width: 130rpx;
				height: 70rpx;
				border-radius: 10rpx;
				background-color: rgba(0,0,0,.5);
			}
		}
		.user-desc {
			display: flex;
			position: absolute;
			flex-direction: column;
			align-items: center;
			margin:0 auto;
			right: 0;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 200rpx;
			z-index: 1;
			color: #FFFFFF;	
			image {
				width: 150rpx;
				height: 150rpx;	
				border-radius: 50%;
			}
			.name,.bio {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
				// margin-left: 42rpx;
			}
			.bio {
				font-size: 30rpx;
			}
		}
	}
	.tui-news-view {
		.circle-item {
			padding: 8rpx 15rpx;
			border-bottom: 1rpx solid #F3F6F5;
		}
	}
	.tui-news-flex {
		display: flex;
		align-items: center;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.tui-news-picbox {
		display: flex;
		width: 220rpx;
		height: 150rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		
	}
	
	.tui-w220 {
		width: 220rpx;
	}
	
	.tui-h165 {
		height: 165rpx;
	}
	.tui-flex-between {
		justify-content: space-between !important;
	}
	.tui-news-tbox {
		padding: 10rpx 15rpx;
		margin-left: 10rpx;
		flex: 1;
		display: flex;
		justify-content: space-evenly;
		.intro, .detail  {
			font-size: 26rpx;
			text:nth-child(2) {
				margin-left: 15rpx;
			}
		}
		.name {
			font-size: 34rpx;
		}
		
	}
	.detail  {
			display: flex;
			font-size: 24rpx;
			color: #8C8C8C;
			.vLine {
				border-left: solid 1px #8C8C8C;
				height: 13px;
				margin: auto 15rpx;
				vertical-align: middle;
				display: inline-block;
			}
			.posted {
				margin-left: 10rpx;
			}
		}
	.tui-flex-column {
		flex-direction: column !important;
	}
	.center {
		display: flex;
		// align-items: center;
		justify-content: center;
		width: 480rpx;
		height: 170rpx;
		.join {
			display: flex;
			width: 108rpx;
			height: 50rpx;
			z-index: 1;
			background-color: #ff557f;
			color: #fff;
			font-size: 26rpx; 
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
		}
	}
	.right {
		display: flex;
		align-items: center;
		height: 168rpx;
		// width: 140rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #999;
		right: 0;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

</style>
